<template>
  <Teleport to="body">
    <TransitionRoot appear :show="isOpen" as="template">
      <Dialog as="div" class="relative z-50" @close="closeModal">
        <!-- 背景遮罩动画 -->
        <TransitionChild
          as="template"
          enter="ease-out duration-300"
          enter-from="opacity-0"
          enter-to="opacity-100"
          leave="ease-in duration-200"
          leave-from="opacity-100"
          leave-to="opacity-0"
        >
          <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-900/75 backdrop-blur-sm transition-opacity" />
        </TransitionChild>

        <div class="fixed inset-0 overflow-y-auto">
          <div class="flex min-h-full items-center justify-center p-4 text-center">
            <!-- 模态框动画 -->
            <TransitionChild
              as="template"
              enter="transform transition ease-out duration-300"
              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              enter-to="opacity-100 translate-y-0 sm:scale-100"
              leave="transform transition ease-in duration-200"
              leave-from="opacity-100 translate-y-0 sm:scale-100"
              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
              <DialogPanel 
                class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl w-full mx-4"
                :class="{'animate-bounce-in': isOpen}"
              >
                <div class="px-4 pb-4 pt-5 sm:p-8">
                  <!-- Logo 部分 -->
                  <div class="flex justify-center mb-6">
                    <img src="/assets/modest.png" alt="Modest Logo" class="h-16 w-16 sm:h-20 sm:w-20">
                  </div>
                  <div class="sm:flex sm:items-start sm:gap-6">
                    <!-- 文本内容 -->
                    <div class="mt-3 text-center sm:mt-0 sm:text-left flex-1">
                      <div class="flex flex-col sm:flex-row sm:items-center sm:gap-4 mb-4">
                        <!-- 警告图标 - 在移动端保持原位置，在 PC 端移到标题旁边 -->
                        <div class="mx-auto sm:hidden flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900 mb-3">
                          <svg class="h-6 w-6 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                          </svg>
                        </div>
                        <div class="flex items-center gap-4">
                          <div class="hidden sm:flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full bg-yellow-100 dark:bg-yellow-900">
                            <svg class="h-8 w-8 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                            </svg>
                          </div>
                          <h3 class="text-xl sm:text-2xl font-semibold leading-6 text-gray-900 dark:text-white" id="modal-title">
                            免责声明
                          </h3>
                        </div>
                      </div>
                      <div class="mt-2">
                        <p class="text-base text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
                          本网站为演示项目，可用于商业用途。如果您对本项目感兴趣，欢迎联系我们进行咨询和购买。我们提供完整的源代码、部署文档和技术支持。
                        </p>
                        <!-- 联系方式部分 -->
                        <div class="space-y-4">
                          <!-- 电话联系方式 -->
                          <div class="flex items-center justify-between bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 sm:p-5">
                            <div class="flex items-center space-x-3">
                              <svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                              </svg>
                              <div>
                                <p class="text-base sm:text-lg text-primary-600 dark:text-primary-400 font-medium">
                                  联系电话/微信：{{ pageData.common.contact.phone }}
                                </p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                  点击右侧按钮复制
                                </p>
                              </div>
                            </div>
                            <button
                              @click="copyText(pageData.common.contact.phone, 'phone')"
                              class="inline-flex items-center px-4 py-2.5 text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-500 dark:bg-primary-700 dark:hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-800 transition-colors duration-200"
                            >
                              <Transition
                                mode="out-in"
                                enter-active-class="transition duration-200 ease-out"
                                enter-from-class="transform scale-75 opacity-0"
                                enter-to-class="transform scale-100 opacity-100"
                                leave-active-class="transition duration-200 ease-in"
                                leave-from-class="transform scale-100 opacity-100"
                                leave-to-class="transform scale-75 opacity-0"
                              >
                                <svg v-if="!copiedStates.phone.value" key="copy" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                                </svg>
                                <svg v-else key="check" class="h-5 w-5 sm:h-6 sm:w-6 text-green-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                              </Transition>
                            </button>
                          </div>
                          <!-- 邮箱联系方式 -->
                          <div class="flex items-center justify-between bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 sm:p-5">
                            <div class="flex items-center space-x-3">
                              <svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                              </svg>
                              <div>
                                <p class="text-base sm:text-lg text-primary-600 dark:text-primary-400 font-medium">
                                  电子邮箱：{{ pageData.common.contact.email }}
                                </p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                  点击右侧按钮复制
                                </p>
                              </div>
                            </div>
                            <button
                              @click="copyText(pageData.common.contact.email, 'email')"
                              class="inline-flex items-center px-4 py-2.5 text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-500 dark:bg-primary-700 dark:hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-800 transition-colors duration-200"
                            >
                              <Transition
                                mode="out-in"
                                enter-active-class="transition duration-200 ease-out"
                                enter-from-class="transform scale-75 opacity-0"
                                enter-to-class="transform scale-100 opacity-100"
                                leave-active-class="transition duration-200 ease-in"
                                leave-from-class="transform scale-100 opacity-100"
                                leave-to-class="transform scale-75 opacity-0"
                              >
                                <svg v-if="!copiedStates.email.value" key="copy" class="h-5 w-5 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
                                </svg>
                                <svg v-else key="check" class="h-5 w-5 sm:h-6 sm:w-6 text-green-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                              </Transition>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 按钮区域 -->
                <div class="bg-gray-50 dark:bg-gray-700/50 px-4 py-4 sm:px-8 sm:py-5">
                  <div class="sm:flex sm:flex-row-reverse">
                    <button
                      type="button"
                      @click="closeModal"
                      class="w-full sm:w-auto inline-flex justify-center rounded-md bg-primary-600 dark:bg-primary-700 px-5 py-2.5 text-base font-semibold text-white shadow-sm hover:bg-primary-500 dark:hover:bg-primary-600 sm:ml-3 transition-colors duration-200"
                    >
                      我知道了
                    </button>
                  </div>
                </div>
              </DialogPanel>
            </TransitionChild>
          </div>
        </div>
      </Dialog>
    </TransitionRoot>
  </Teleport>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { TransitionRoot, TransitionChild, Dialog, DialogPanel } from '@headlessui/vue'
import { pageData } from '../composables/data/pageData'

const isOpen = ref(false)
const copiedStates = {
  phone: ref(false),
  email: ref(false)
}

const closeModal = () => {
  isOpen.value = false
}

const disableScroll = () => {
  document.body.style.overflow = 'hidden'
  document.body.style.paddingRight = `${window.innerWidth - document.documentElement.clientWidth}px`
}

const enableScroll = () => {
  document.body.style.overflow = ''
  document.body.style.paddingRight = ''
}

watch(isOpen, (newValue) => {
  if (newValue) {
    disableScroll()
  } else {
    enableScroll()
  }
})

onMounted(() => {
  isOpen.value = true
  if (isOpen.value) {
    disableScroll()
  }
})

onUnmounted(() => {
  enableScroll()
})

const copyText = async (text, type) => {
  try {
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(text)
    } else {
      const textArea = document.createElement('textarea')
      textArea.value = text
      textArea.style.position = 'fixed'
      textArea.style.left = '-999999px'
      textArea.style.top = '-999999px'
      document.body.appendChild(textArea)
      textArea.focus()
      textArea.select()
      
      try {
        document.execCommand('copy')
      } catch (err) {
        console.error('Failed to copy using execCommand:', err)
        return
      } finally {
        textArea.remove()
      }
    }
    
    copiedStates[type].value = true
    setTimeout(() => {
      copiedStates[type].value = false
    }, 2000)
  } catch (err) {
    console.error('Failed to copy text: ', err)
  }
}
</script>

<style>
.animate-bounce-in {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
  60% {
    opacity: 1;
    transform: scale(1.03) translateY(-5px);
  }
  80% {
    transform: scale(0.98) translateY(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.transform {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>